<template>
  <div class="ge">
    <div class="prop">
      <div class="props">
        <span>男</span><span>天秤座</span><span>188cm</span>
      </div>
      <div class="born">
        <span>1976年10月23日</span
        ><span>出生于加拿大,不列颠哥伦比亚省,温哥华</span>
      </div>
      <div class="individual-resume">
        <p :class="[isSmallBox ? 'smallContent' : 'content']">
          瑞安·雷诺兹（Ryan
          Reynolds），1976年10月23日出生于加拿大温哥华，加拿大演员。
          1990年，参演个人首部电影《Fifteen》。1993年，参演科幻悬疑剧《
          X档案第一季》。1999年，出演喜剧电影《
          迪克》。2003年，凭借校园喜剧电影《
          留级之王》入围第12届MTV电影奖最具突破男演员奖。2005年，主演惊悚悬疑电影《
          鬼哭神嚎》，他凭借该片获得第7届青少年选择奖最佳电影恐怖戏奖。2009年，出演动作电影《
          金刚狼》。2010年，主演悬疑惊悚电影《
          活埋》，他凭借该片入围第25届西班牙戈雅奖最佳男演员奖。
          2011年，主演科幻动作电影《
          绿灯侠》，他凭借该片入围第13届青少年选择奖最佳科幻/奇幻电影男演员奖。2015年，凭借动作冒险电影《
          死侍》入围第74届美国金球奖音乐喜剧类最佳男主角奖。2017年，由其主演的动作喜剧电影《
          王牌保镖》上映；同年，获得第43届人民选择奖最受喜爱电影男演员奖。2019年，由其主演的电影《
          死侍2：我爱我家》上映。2020年，主演动作喜剧电影《 分身人》。
        </p>
      </div>
      <div>
        <van-icon
          @click="handelArrowClick()"
          :name="isSmallBox ? 'arrow-down' : 'arrow-up'"
        />
      </div>
      <div class="img">
        <img
          src="https://p0.meituan.net/movie/7b2e6ec8d576fce047b05d73dfb0d8191270305.jpeg@1sc%7C166w%7C0_0_166_134a"
          alt=""
        />
        <img
          src="https://p1.meituan.net/movie/06f972165b4caf8c055bb6c563a5fb5a1171830.jpeg@1sc%7C166w%7C0_0_166_134a"
          alt=""
        />
        <img
          src="https://p0.meituan.net/movie/7b2e6ec8d576fce047b05d73dfb0d8191270305.jpeg@1sc%7C166w%7C0_0_166_134a"
          alt=""
        />
        <img
          src="https://p1.meituan.net/movie/06f972165b4caf8c055bb6c563a5fb5a1171830.jpeg@1sc%7C166w%7C0_0_166_134a"
          alt=""
        />
      </div>
    </div>
    <p class="space"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSmallBox: true,
    };
  },

  methods: {
    handelArrowClick() {
      this.isSmallBox = !this.isSmallBox;
    },
  },
};
</script>

<style scoped>
.prop{
  padding: 0.3rem 0.4rem 0.3rem 0.4rem;

}
img {
  width: 1.6rem;
  height: 1.3rem;
}

.smallContent {
  height: 0.8rem;
  overflow: hidden;
}

.content {
  height: 7rem;
  overflow: hidden;
}

.van-icon {
  width: 100%;
  text-align: center;
}
.space {
  width: 100%;
  height: 0.3rem;
  background: #eaeaea;
}
</style>